<template>
  <div class="winningRecord">
    <!-- 标题 -->
    <div
      class="title"
      :class="{
        'title-fri': lotteryStore.isFri,
      }"
    >
      <div class="title-content items-center">
        <img
          v-if="!lotteryStore.isFri"
          class="title-content-left"
          src="/image/lottery-v3/title-icon.svg"
        />
        <img
          v-else
          class="title-content-left"
          src="/image/lottery-v3/titlefri-icon.svg"
        />
        <div
          class="title-content-text"
          :class="{
            'title-content-text-fri': lotteryStore.isFri,
          }"
        >
          {{ $t("lotteryMoney.zjjgText") }}
        </div>
        <img
          v-if="!lotteryStore.isFri"
          class="title-content-right"
          src="/image/lottery-v3/title-icon.svg"
        />
        <img
          v-else
          class="title-content-right"
          src="/image/lottery-v3/titlefri-icon.svg"
        />
      </div>
    </div>
    <!-- 奖励说明 -->
    <div class="top" @click.top="showPopup">
      <img
        v-if="!lotteryStore.isFri"
        class="top-icon"
        src="/image/lottery-v3/reward-bg.png"
      />
      <img v-else class="top-icon" src="/image/lottery-v3/reward-bg1.png" />
      <div class="top-edj">
        <div class="top-edj-title">{{ $t("lotteryMoney.edj") }}</div>
        <div
          class="top-edj-money"
          :class="{ 'top-edj-money-fri': lotteryStore.isFri }"
        >
          <!-- 1.无人中奖,去奖池的 30%,超过 10 美金,显示 10 美金; 2. 有人中奖,取奖池的 30%,在除以中奖注数,大于 10 显示 10 -->
          $
          {{
            toThousands(
              decimalToLength(
                new Decimal(lotteryStore.secondPrizeBonus).div(1000).toString()
              )
            )
          }}
        </div>
      </div>
      <div class="top-ydj items-center">
        <div class="top-ydj-title">{{ $t("lotteryMoney.ydj") }}</div>
        <div
          class="top-ydj-money"
          :class="{ 'top-ydj-money-fri': lotteryStore.isFri }"
        >
          <!-- 1.一等奖取奖池的 30% ,多人中奖 除以注数 -->
          $
          {{
            toThousands(
              decimalToLength(
                new Decimal(lotteryStore.firstPrizeBonus).div(1000).toString()
              )
            )
          }}
        </div>
      </div>
      <div class="top-sdj">
        <div class="top-sdj-title">{{ $t("lotteryMoney.sdj") }}</div>
        <div
          class="top-sdj-money"
          :class="{ 'top-sdj-money-fri': lotteryStore.isFri }"
        >
          500 BDC
        </div>
      </div>
      <div
        class="top-cyj items-center"
        :class="{ 'top-cyj-fri': lotteryStore.isFri }"
      >
        <div
          class="top-cyj-title"
          :class="{ 'top-cyj-title-fri': lotteryStore.isFri }"
        >
          {{ $t("lotteryMoney.cyj") }}
        </div>
        <div
          class="top-cyj-money"
          :class="{ 'top-cyj-money-fri': lotteryStore.isFri }"
        >
          100 BDC
        </div>
        <img
          v-if="lotteryStore.isFri"
          class="top-cyj-icon"
          src="/image/jt-right1-icon.svg"
        />
        <img v-else class="top-cyj-icon" src="/image/jt-right0-icon.svg" />
      </div>
    </div>
    <!-- 中奖记录 -->
    <div class="bottom">
      <WinningRecordSwipe></WinningRecordSwipe>
    </div>
    <!-- 更多 -->
    <div
      v-if="lotteryStore.$state.recentPrizeRecordList.length > 5"
      class="footer items-center"
      @click="jump"
    >
      <div class="footer-text">{{ $t("activity.more") }}</div>
      <img class="footer-img" src="/public/image/jt-right-icon.svg" />
    </div>
  </div>
</template>
<script setup lang="ts" name="winningRecord">
import WinningRecordSwipe from "./winning-record-swipe.vue";
import { useLotteryV3Store } from "~~/store/modules/lottery-v3";
import Decimal from "decimal.js";

const emit = defineEmits(["update:show", "call"]);

const lotteryStore = useLotteryV3Store();

const showPopup = () => {
  emit("call");
};
// firebase埋点
const firebase = useInitFirebase(); // 初始化firebase

onMounted(() => {});

const jump = () => {
  firebase?.logEvent("BDC_H5_LotteryV3_winDetails_Click");
  navigateI18nTo({
    path: "/lottery-v3/day-winning-details",
    query: {
      sessionId: lotteryStore.$state.sessionId,
    },
  });
};
</script>
<style lang="scss" scoped>
.winningRecord {
  position: relative;
  background-color: #fff;
  margin: 5 * 2px 15 * 2px 10 * 2px 15 * 2px;
  padding: 20 * 2px 10 * 2px 10 * 2px 10 * 2px;
  border-radius: 12 * 2px;
}
.title {
  position: relative;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(0, 123, 255, 0) 0%,
    rgba(0, 123, 255, 1) 50%,
    rgba(0, 123, 255, 0) 100%
  );
  &-fri {
    background: linear-gradient(
      90deg,
      rgba(255, 155, 1, 0) 0%,
      rgba(255, 155, 1, 1) 50%,
      rgba(255, 155, 1, 0) 100%
    );
  }

  &-content {
    position: absolute;
    top: -11 * 2px;
    left: 50%;
    transform: translateX(-50%);

    &-left {
      position: relative;
      right: -0.8px;
      height: 22 * 2px;
    }
    &-text {
      color: #fff;
      font-size: 13 * 2px;
      font-weight: 590;
      background-color: #007bff;
      padding: 0 * 2px 8 * 2px;
      height: 22 * 2px;
      line-height: 22 * 2px;
      white-space: nowrap;
      &-fri {
        background: #ff9b01;
      }
    }
    &-right {
      position: relative;
      left: -0.8px;
      transform: rotateY(180deg);
      height: 22 * 2px;
    }
  }
}
.top {
  position: relative;
  padding-top: 10 * 2px;
  margin-bottom: 10 * 2px;
  &-icon {
    width: 100%;
    height: 84 * 2px;
    object-fit: cover;
  }
  &-edj {
    position: absolute;
    top: 62 * 2px;
    left: 0px;
    width: 108 * 2px;
    text-align: center;
    &-title {
      width: 100%;
      font-size: 11 * 2px;
      color: rgba(255, 255, 255, 0.8);
      font-weight: 400;
      margin-bottom: 1.5 * 2px;
    }
    &-money {
      width: 100%;
      font-size: 11 * 2px;
      color: #007bff;
      font-weight: 590;
      &-fri {
        color: #d98300;
      }
    }
  }
  &-ydj {
    position: absolute;
    top: 51 * 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 120 * 2px;
    height: 42 * 2px;
    text-align: center;
    flex-direction: column;
    justify-content: center;

    &-title {
      width: 100%;
      font-size: 11 * 2px;
      color: rgba(255, 255, 255, 0.8);
      font-weight: 400;
      margin-bottom: 1 * 2px;
    }
    &-money {
      width: 100%;
      font-size: 11 * 2px;
      color: #ffec83;
      font-weight: 590;
      &-fri {
        color: #fff;
      }
    }
  }
  &-sdj {
    position: absolute;
    top: 63 * 2px;
    right: 0px;
    width: 108 * 2px;
    text-align: center;
    &-title {
      width: 100%;
      font-size: 11 * 2px;
      color: rgba(255, 255, 255, 0.8);
      font-weight: 400;
      margin-bottom: 1.5 * 2px;
    }
    &-money {
      width: 100%;
      font-size: 11 * 2px;
      color: #007bff;
      font-weight: 590;
      &-fri {
        color: #d98300;
      }
    }
  }
  &-cyj {
    position: relative;
    width: 100%;
    height: 20 * 2px;
    line-height: 20 * 2px;
    text-align: center;
    background: linear-gradient(
      90deg,
      rgba(178, 215, 255, 0) 0%,
      #b2d7ff 50.48%,
      rgba(178, 215, 255, 0) 100%
    );
    justify-content: center;

    &-fri {
      background: linear-gradient(
        90deg,
        rgba(255, 224, 178, 0) 0%,
        #ffe0b2 50.48%,
        rgba(255, 224, 178, 0) 100%
      );
    }

    &-title {
      font-size: 11 * 2px;
      color: #5390d0;
      font-weight: 400;
      margin-right: 10 * 2px;
      &-fri {
        color: #d09e53;
      }
    }
    &-money {
      font-size: 11 * 2px;
      color: #007bff;
      font-weight: 590;
      &-fri {
        color: #ff9b01;
      }
    }
    &-icon {
      margin-left: 9 * 2px;
      width: 10 * 2px;
      height: 10 * 2px;
    }
  }
}
.bottom {
  height: 172 * 2px;
}
.footer {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 8 * 2px;
  display: inline-flex;
  justify-content: center;
  border-radius: 100px;
  padding: 2 * 2px 10 * 2px;
  border: 0.7px solid #e8eaf0;

  &-text {
    color: #999da7;
    font-size: 12 * 2px;
    font-weight: 400;
  }
  &-img {
    margin-left: 4 * 2px;
    width: 10 * 2px;
    height: 10 * 2px;
  }
}
</style>
